<template>
  <div>
    <Swiper />
    <Messg />
    <!-- 下面的 -->
    <el-row>
      <el-col :span="18" style="padding-right:10px">
        <HOmbie />
        <el-row v-for="(item,index) in datax" :key="(index+1)*1.1">
          <Money
            :value="item.value"
            :time="item.time"
            :money="item.money"
            :context="item.context"
            :color="item.color"
            :config="config"
            :p="true"
          />
        </el-row>
        <!-- 中心广告 -->
        <el-row class="midleguanga">
          <el-image style="width: 100%; height: 180px" src="static/igm/页中广告图900x180.jpg" fit="fit"></el-image>
        </el-row>
        <!-- 2 -->
        <Monebb />
        <!-- 股票 -->
        <el-row v-for="(item,index) in data2" :key="index*7.5">
          <Money
            :value="item.value"
            :time="item.time"
            :money="item.money"
            :context="item.context"
            :color="item.color"
            :config="config2"
            :p="true"
          />
        </el-row>
        <!-- 广告 -->
        <el-row class="midleguanga">
          <el-image style="width: 100%; height: 180px" src="static/igm/页尾广告图900x180.jpg" fit="fit"></el-image>
        </el-row>
        <!-- 光gap -->
        <guanggao />
      </el-col>
      <!-- 滚动快 -->
      <el-col :span="6" class="gundong" :style="dscroll">
        <el-row class="yunyg">
          <el-col :span="20" :offset="2" class="topt">运营概况</el-col>
          <el-col>
            <el-row class="rowmar">
              <el-col :span="7" :offset="4" class="disgc">
                <el-image style="width: 40px; height: 40px" src="static/igm/天平.png" fit="fit"></el-image>
                <p class="p1">累计成标</p>
                <h5>268 &nbsp&nbsp&nbsp次</h5>
              </el-col>
              <el-col :span="7" :offset="3" class="disgc">
                <el-image style="width: 40px; height: 40px" src="static/igm/箱子.png" fit="fit"></el-image>
                <p class="p1">累计发布标数</p>
                <h5>268 &nbsp&nbsp&nbsp人</h5>
              </el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-row class="rowmar">
              <el-col :span="7" :offset="4" class="disgc">
                <el-image style="width: 40px; height: 40px" src="static/igm/钱 金融 支付.png" fit="fit"></el-image>
                <p class="p1">交易总额</p>
                <h5>268&nbsp&nbsp&nbsp万元</h5>
              </el-col>
              <el-col :span="7" :offset="3" class="disgc">
                <el-image
                  style="width: 40px; height: 40px"
                  src="./static/igm/钱 金融 支付.png"
                  fit="fit"
                ></el-image>
                <p class="p1">累计发布总额</p>
                <h5>268&nbsp&nbsp&nbsp万元</h5>
              </el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-row class="rowmar">
              <el-col :span="7" :offset="4" class="disgc">
                <el-image style="width: 40px; height: 40px" src="static/igm/人群.png" fit="fit"></el-image>
                <p class="p1">累计成标</p>
                <h5>268&nbsp&nbsp&nbsp人</h5>
              </el-col>
              <el-col :span="7" :offset="3" class="disgc">
                <el-image style="width: 40px; height: 40px" src="static/igm/人群.png" fit="fit"></el-image>
                <p class="p1">累计注册人数</p>
                <h5>268&nbsp&nbsp&nbsp人</h5>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 技术 -->
        <el-row class="yunyg" style="margin-top:10px">
          <el-col :span="20" :offset="2" class="topt">计算器</el-col>
          <el-col :span="24" class="compuert">
            <Calc />
          </el-col>
        </el-row>

        <!-- 侧边栏 -->
        <el-row class="cebianl">
          <el-image style="width: 100%; height: 60px" src="static/igm/侧边栏290x58.jpg" fit="fit"></el-image>
        </el-row>
        <!-- 留言版 -->
        <el-row style="margin-top:10px" class="help">
          <el-row type="flex" align="bottom" class="pads">
            <el-col :span="15" :offset="2" class="big">理财投标帮助</el-col>
            <el-col :span="6" :offset="1" class="ot">查看更多</el-col>
          </el-row>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
        </el-row>
        <el-row style="margin-top:10px" class="help">
          <el-row type="flex" align="bottom" class="pads">
            <el-col :span="15" :offset="2" class="big">炒股投标帮助</el-col>
            <el-col :span="6" :offset="1" class="ot">查看更多</el-col>
          </el-row>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
          <el-col :span="21" :offset="2">首次注册后如何认证成为实名会员</el-col>
        </el-row>
        <!-- 咨询建议 -->
        <el-row style="margin-top:10px" class="help">
          <el-row class="pads botbord">
            <el-col :span="15" :offset="2" class="houver" @click.native="open">
              <el-image style="width: 25px; height: 25px" src="static/igm/留言.png" fit="fit"></el-image>咨询建议
            </el-col>
            <el-col :span="6" :offset="1" class="ot">查看更多</el-col>
            <el-row v-bind:class="{ 'displ': flag}">
              <el-col :span="20" :offset="2">
                <el-input
                  type="textarea"
                  :rows="4"
                  maxlength="140"
                  show-word-limit
                  placeholder="请输入内容"
                  v-model="textarea"
                ></el-input>
              </el-col>
              <el-col
                :span="20"
                :offset="2"
                style="text-align:center;margin-top:10px;margin-bottom:10px"
              >
                <el-button type="primary" @click="coloes">提交</el-button>
              </el-col>
            </el-row>
          </el-row>
          <!-- 留言内容 -->
          <el-row class="fonts">
            <el-col :span="13" :offset="2">雪夜思股</el-col>
            <el-col :span="7" :offset="1">2019-10-25</el-col>
          </el-row>
          <el-row>
            <el-col :span="22" :offset="1" class="clwr">
              <span class="redcoo">咨询：</span>组件拖出来特别多一个一个删麻烦，这个问题，首先将组件拖入画布中，
              然后按住“shift”键，用鼠标点击要使用的组件。
            </el-col>
            <el-col :span="22" :offset="1" class="clwr">
              <span class="redcoox">回复：</span> 组件拖出来特别多一个一个删麻烦，这个问题，首先将组件拖入画布中，然后按住“shift”键，用鼠标点击要使用的组件，使该组件取消选择。再点击“delete”键 ，即可删除剩余不需要使用的组件。 Paragraph example.
            </el-col>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Calc from "../tool/CalculatorContent";
import Messg from "../tool/Messg";
import HOmbie from "../tool/Homebig";
import Money from "../tool/Money";
import Monebb from "../tool/Homebb";
import guanggao from "../tool/guanga";
import Swiper from "../tool/swiper";
export default {
  components: {
    Messg,
    HOmbie,
    Money,
    Monebb,
    guanggao,
    Calc,
    Swiper
  },
  data() {
    return {
      config: ["预期年化收益率", "理财期限", "理财金额", "按月结算"],
      config2: ["每月资金成本", "炒股时间", "需要金额", "按月结算"],
      datax: [
        {
          value: [11, "+", 1],
          time: 12,
          money: 500,
          context: "开始理财",
          color: "background-color:#F40909"
        },
        {
          value: [11, "+", 1],
          time: 12,
          money: 500,
          context: "开始理财",
          color: "background-color:#F40909"
        },
        {
          value: [11, "+", 1],
          time: 12,
          money: 500,
          context: "开始理财",
          color: "background-color:#F40909"
        },
        {
          value: [11, "+", 1],
          time: 12,
          money: 500,
          context: "开始理财",
          color: "background-color:#F40909"
        },
        {
          value: [11, "+", 1],
          time: 12,
          money: 500,
          context: "已投标",
          color: "background-color:#F7E4D9"
        },
        {
          value: [11, "+", 1],
          time: 12,
          money: 500,
          context: "已成标",
          color: "background-color:#7F7F7F"
        }
      ],
      data2: [
        {
          value: [1.2, "-", 0.1],
          time: 9,
          money: 500,
          context: "开始炒股",
          color: "background-color:#0000FF"
        },
        {
          value: [1.2, "-", 0.1],
          time: 9,
          money: 500,
          context: "开始炒股",
          color: "background-color:#0000FF"
        },
        {
          value: [1.2, "-", 0.1],
          time: 9,
          money: 500,
          context: "开始炒股",
          color: "background-color:#0000FF"
        },
        {
          value: [1.2, "-", 0.1],
          time: 9,
          money: 500,
          context: "开始炒股",
          color: "background-color:#0000FF"
        },
        {
          value: [1.2, "-", 0.1],
          time: 9,
          money: 500,
          context: "已投标",
          color: "background-color:#D9E8F7"
        },
        {
          value: [1.2, "-", 0.1],
          time: 9,
          money: 500,
          context: "已成标",
          color: "background-color:#797979"
        }
      ],
      textarea: "",
      flag: true,
      dscroll: "top:0px"
    };
  },
  methods: {
    open() {
      this.flag = false;
    },
    coloes() {
      this.flag = true;
    },
    fixelaye() {
      let b = window.scrollY;
      let that = this;
      if (b > 650) {
        //是否开始滚动
        if (b - 640 > 580) {
          //停止滚动
          return "";
        } else {
       
          that.dscroll = `top:${b - 640}px`;
        }
      } else {
        //是否复原
        this.dscroll = `top:0px`;
      }
    }
  },
  mounted() {
    // 绑定事件
    window.addEventListener("scroll", this.fixelaye);
  },
  destroyed() {
    // 取消事件
      window.removeEventListener("scroll",this.fixelaye)
  }
};
</script>

<style scoped>
.fonts {
  font-size: 14px;
  line-height: 22px;
}
.displ {
  display: none;
}
.midleguanga {
  width: 100%;
  height: 180px;
  margin: 10px 0;
}
.yunyg {
  background-color: #ffffff;
}
.yunyg > .topt {
  font-size: 16px;
  line-height: 28px;
  margin-top: 10px;
}
.disgc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.disgc > .p1 {
  font-size: 14px;
  line-height: 24px;
  color: #000000;
}
.rowmar {
  margin: 10px 0;
}
.compuert {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0px;
}
.cebianl {
  margin: 10px 0;
}
.help {
  padding: 10px 0;
  background-color: #ffffff;
  line-height: 30px;
  font-size: 14px;
}
.help .big {
  font-size: 25px;
  color: black;
}
.help .ot {
  color: #1a87fe;
}
.pads {
  margin-bottom: 15px;
}
.botbord {
  border-bottom: 1px dotted #797979;
}
.houver {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.redcoo {
  color: #f40909;
}
.redcoox {
  color: #0000ee;
}
.clwr {
  font-size: 14px;
  line-height: 30px;
}
.gundong {
  position: relative;
  transition: all 1.6s ease;
}
</style>